<template>
    <view>
        <div class="content">
            <div class="head">
                <image src="../../static/logo.png" style="width: 80px;height: 80px;"></image>
                <p class="title">CRM客户关系管理系统</p>
                <p class="desc">客户全流程高效管理</p>
            </div>

            <div class="login">
                <div class="login-item">
                    <text>工号</text>
                    <div class="input-account">
                        <input v-model="userName" placeholder="请输入工号" type="text"></input>
                    </div>
                </div>
                <div class="login-item">
                    <text>密码</text>
                    <div class="input-pwd">
                        <input v-model="password" placeholder="请输入密码" type="password"></input>
                    </div>
                </div>
                <div class="login-btn">
                    <button class="cu-btn block bg-green margin-tb-sm lg" open-type="getUserInfo" withCredentials="true"
                        lang="zh_CN" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>版权所有</p>
        </div>

    </view>
</template>

<script>
    import api from '@/api/api.js';
    export default {
        data() {
            return {
                userName: "",
                password: "",
            };
        },
        onShow() {
            this.openLocation();
        },
        methods: {
            //获取数据字典
            getDicts: function() {
                api.getDicts().then(
                    res => {
                        if (res.code == 200) {

                            uni.setStorageSync('dicts', JSON.stringify(res));
                            uni.reLaunch({
                                url: '../index/index?from=login',
                                animationType: 'pop-in',
                                animationDuration: 100
                            })
                        } else {

                        }
                    },
                    rej => {}
                );
            },
            login: function() {
                if (this.utils.isEmpty(this.userName)) {
                    uni.showToast({
                        title: "请输入工号",
                        icon: 'none',
                    });
                    return
                }
                if (this.utils.isEmpty(this.password)) {
                    uni.showToast({
                        title: "请输入密码",
                        icon: 'none',
                    });
                    return
                }
                var data = {
                    userName: this.userName,
                    password: this.password,
                };
                var that = this;
                api.loginByPwd(data).then(
                    res => {
                        console.log(res);
                        if (res.code == 200) {
                            console.log(res.data.token);
                            uni.setStorageSync('perms', JSON.stringify(res.data.perms));
                            uni.setStorageSync('AppToken', res.data.token);
                            uni.setStorageSync('user', JSON.stringify(res.data.user));
                            that.getDicts()
                            // uni.authorize({
                            // 	scope: 'scope.userInfo',
                            // 	success() {
                            // 		that.uniLogin();
                            // 	},
                            // 	fail() {
                            // 		uni.showModal({
                            // 			title: '提示',
                            // 			content: '为了完成您的账号登录绑定，需要您授权小程序获取必要个人信息。',
                            // 			confirmText: '确定',
                            // 			cancelText: '取消',
                            // 			success(res) {
                            // 				if (res.confirm) {
                            // 					that.uniLogin();
                            // 				}
                            // 			}
                            // 		})
                            // 	}
                            // });
                        } else {
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            })
                        }

                    },
                    rej => {}
                );
                return;
                // uni.showActionSheet({
                //     itemList: ['A', 'B', 'C'],
                //     success: function (res) {
                // 		uni.reLaunch({
                // 			url: '../index/index',
                // 			animationType: 'pop-in',
                // 			animationDuration: 100
                // 		})

                //     },
                //     fail: function (res) {
                //         console.log(res.errMsg);
                //     }
                // });

            },
            openMsg() {
                var that = this;
                uni.showModal({
                    title: '提示',
                    content: '小程序需要订阅消息',
                    success(res) {
                        if (res.confirm) {


                            uni.reLaunch({
                                url: '../index/index',
                                animationType: 'pop-in',
                                animationDuration: 100
                            })


                            // uni.requestSubscribeMessage({
                            // 	tmplIds: that.baseConfig.customerTemp,
                            // 	success(res) {
                            // 		uni.reLaunch({
                            // 			url: '../index/index',
                            // 			animationType: 'pop-in',
                            // 			animationDuration: 100
                            // 		})

                            // 	},
                            // 	fail(res) {
                            // 		uni.reLaunch({
                            // 			url: '../index/index',
                            // 			animationType: 'pop-in',
                            // 			animationDuration: 100
                            // 		})
                            // 		console.log(res.errMsg)
                            // 	}
                            // })
                        }
                    }
                })
            },
            openLocation() {
                var that = this;
                uni.authorize({
                    scope: 'scope.userLocation',
                    success() {
                        uni.getLocation({
                            type: 'gcj02', //腾讯地图使用gcj02获取位置坐标
                            success: function(res) {
                                console.log('当前位置的经度：' + res.longitude);
                                console.log('当前位置的纬度：' + res.latitude);


                            },
                        })
                    },
                    fail(err) {
                        console.log(err)
                    }
                })
            },
            //用户登录
            uniLogin() {
                let that = this;
                uni.login({
                    provider: 'weixin',
                    success: function(loginRes) {
                        let code = loginRes.code;
                        uni.getUserInfo({
                            success(res) {
                                // var encryptedData = res.encryptedData;
                                // var iv = res.iv;
                                var data = {
                                    code: code,
                                };
                                //小程序登录
                                api.loginWx(data).then(
                                    res => {
                                        uni.showToast({
                                            title: res.msg,
                                            icon: 'none'
                                        })
                                        if (res.code == 200) {
                                            that.openMsg()
                                        }
                                    },
                                    rej => {}
                                );
                            }
                        })
                    },
                    fail() {
                        console.log('微信登录失败');
                    }
                });
            },

        },
        onLoad() {

        }
    };
</script>

<style>
    page {
        background-color: #ffffff;
    }

    .content .head {
        text-align: center;
        width: 100%;
    }

    .content .head image {
        margin-top: 60px;
        width: 100%;
        border-radius: 10px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    }

    .input-account {
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 20px;
        border: solid 0.5px #dfdfdf;
        height: 40px;
        width: 100%;
        background: url(../../static/account.png) no-repeat 0 center;
        background-size: 15px 15px;
        background-position: 10px;

    }

    .input-pwd {
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 20px;
        border: solid 0.5px #dfdfdf;
        height: 40px;
        width: 100%;
        background: url(../../static/password.png) no-repeat 0 center;
        background-size: 15px 15px;
        background-position: 10px;
    }

    .input-account input {
        margin-left: 35px;
        height: 40px;
        line-height: 40px;
    }

    .input-pwd input {
        margin-left: 35px;
        height: 40px;
        line-height: 40px;
    }

    .title {
        font-family: ;
        color: #141414;
        margin: 0 0 10px 10px;
        font-size: 20px;
    }

    .desc {
        color: #686866;
        margin: 10 0 10px 0px;
        font-size: 15px;
    }

    .login {
        margin: 25px;
    }

    .login-item p {
        text-align: left;
    }

    .login-btn {

        border-radius: 15px;
        margin-top: 30px;
    }

    .footer {
        color: #686866;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        position: absolute;
        bottom: 0px;
    }

    .footer radio {}

    .uni-input-placeholder {
        font-size: 12px;
    }
</style>